How to use cookies in angular

Table of Contents

What is Cookies in Angular?

Cookies are small packages of information that can be temporarily stored/saved by your browser and websites which are using cookies for multiple things.

Cookies are used in multiple requests and browser sessions and can store your account information used by authentication for example.

Also Read: Transpilation in Angular

Size of Cookies

They are often not more than a few kilobytes per cookie.

How to install Cookies Dependency

We already have an NPM package for Angular called ‘ngx-cookie-service‘ that can be used for cookie use.

Let’s install the cookies dependency using below command:


npm install ngx-cookie-service

npm install ngx-cookie-service

After installing the cookies dependency, we have to import the CookieService inside one of our modules and add them as a provider. Please refer the below example code:

app.module.ts file


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [CookieService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule],

providers: [CookieService],

bootstrap: [AppComponent]

})

export class AppModule { }

Also Read: Angular Online Quiz Test

How to use Cookies in Angular

Now we will use our AppComponent and use the set, get and delete method of the CookieService. In the below example code,

app.component.ts file


import { Component} from '@angular/core';
import {CookieService} from 'ngx-cookie-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 
})

export class AppComponent {
private cookie_name='';
 private all_cookies:any='';

constructor(private cookieService:CookieService){

}

setCookie(){
  this.cookieService.set('name','Tutorialswebsite');
}

deleteCookie(){
  this.cookieService.delete('name');
}

deleteAll(){
  this.cookieService.deleteAll();
}

ngOnInit(): void {
this.cookie_name=this.cookieService.get('name');
this.all_cookies=this.cookieService.getAll();  // get all cookies object
    }
}

import { Component} from '@angular/core';

import {CookieService} from 'ngx-cookie-service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

})

export class AppComponent {

private cookie_name='';

private all_cookies:any='';

constructor(private cookieService:CookieService){

}

setCookie(){

this.cookieService.set('name','Tutorialswebsite');

}

deleteCookie(){

this.cookieService.delete('name');

}

deleteAll(){

this.cookieService.deleteAll();

}

ngOnInit(): void {

this.cookie_name=this.cookieService.get('name');

this.all_cookies=this.cookieService.getAll(); // get all cookies object

}

we import the CookieService inside the app.component.ts file.


import { CookieService } from 'ngx-cookie-service';

import { CookieService } from 'ngx-cookie-service';

Next step, we will inject this service in the parameters of the constructor and set the private variable.


constructor( private cookieService: CookieService ) { 
    }

constructor( private cookieService: CookieService ) {

}

Set, get and getAll Cookies

In the first line, we are using set function to set the new cookie value with name. In the second line, we are using get function to get the cookie value with cookie name.


this.cookieService.set('name','Tutorialswebsite'); // set the cookies value
this.cookie_name=this.cookieService.get('name');  // get the cookie value
this.all_cookies=this.cookie.getAll(); // get All cookies object

this.cookieService.set('name','Tutorialswebsite'); // set the cookies value

this.cookie_name=this.cookieService.get('name'); // get the cookie value

this.all_cookies=this.cookie.getAll(); // get All cookies object

Delete and Delete All Cookies

In the first line, we are using delete function to delete the single cookie value with name. In the second line, we are using deleteAll function to delete all cookie value with single click.


this.cookieService.delete('name'); // delete the single cookies value
this.cookieService.deleteAll();  // delete all the cookie value

this.cookieService.delete('name'); // delete the single cookies value

this.cookieService.deleteAll(); // delete all the cookie value

app.component.html file

We use the below code to display the output in browser and trigger set Cookies, Delete and Delete All function.


<div style="text-align: center;" >
<h5>Cookies In Angular</h5>
<h5>Cookie Data:</h5>
<p>Name: {{cookie_name}}</p>
<p>Cookie Object: {{all_cookies | json}}</p>
<br>
<button (click)="setCookie()">Set Cookies</button>
<br><br>
<button (click)="deleteCookie()">Delete</button>
<br><br>
<button (click)="deleteAll()">Delete All</button>
</div>

<h5>Cookies In Angular</h5>

<h5>Cookie Data:</h5>

<p>Name: {{cookie_name}}</p>

<p>Cookie Object: {{all_cookies | json}}</p>

<br>

<button (click)="setCookie()">Set Cookies</button>

<button (click)="deleteCookie()">Delete</button>

<button (click)="deleteAll()">Delete All</button>

</div>

Method of Cookies in Angular

Check :- Used to check cookies exits or not
Set :- Used to set the value in cookies with name
Get :- Used to return the single value of stored cookies name
Get All :- Used to return a value object of all cookies
Delete :- Used to delete the single cookies value with the given name
Delete All :- Used to delete all the cookies

Conclusion

Thank you for reading How to use cookies in angular article. Hope I was able to help someone out. If you have any questions feel free to ask anything on the comment section. Cheers!!.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co